<template>
    <div>
        <Button type="success" @click="checkM('modal1')" >添加</Button>
        <Button type="warning" @click="checkM('modal2')">修改</Button>
        <Button type="error" @click="checkM('modal3')">删除</Button>
        <Divider />
        <div>
            <Button v-for="(button,k) in buttons" :key="k" @click="changeType(button)">{{button.title}}</Button>
        </div>

        <Tree :data="treeData" @on-select-change="onCheck"></Tree>

        <!-- 新增模态框 -->
        <Modal
        v-model = "modal1"
        title   = "在当前分类下添加子分类"
        @on-ok  = "creatCate"
        >
        <span>当前分类：</span>
        <Input v-model="butName" disabled  style="width: 200px" class="moduleName" /><br><br>
        <span>分类名称：</span>
        <Input v-model="moduleName" placeholder="请输入分类名称" clearable style="width: 200px" class="moduleName" /><br><br>
        <span>分类类型：</span>
        <Input v-model="type" disabled  style="width: 200px" class="moduleType" /><br>
        </Modal>

        <!-- 修改模态框 -->
        <Modal
        v-model = "modal2"
        title   = "修改当前分类名称"
        @on-ok  = "updataCate"
        >
        <span>分类名称：</span>
        <Input v-model="butName" placeholder="请输入分类名称" clearable style="width: 200px" class="moduleName" /><br><br>
        </Modal>

        <!-- 删除模态框 -->
        <Modal v-model="modal3" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>删除分类</span>
            </p>
            <span>当前分类：</span>
            <Input v-model="butName" disabled  style="width: 200px" class="moduleName" /><br><br>
            <div style="text-align:center">
                <Alert type="warning" show-icon>
                    <p>当前分类的所有子分类也将被删除.</p>
                    <p>你确定要这么做吗?</p>
                </Alert>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long  @click="removeCate">确认删除</Button>
            </div>
        </Modal>

    </div>


</template>
<script>
    export default {
        data(){
            return{
                ids       : '',
                butName   : null,
                buttons   : null,    //按钮
                moduleName: '',      //模块名称
                modal1    : false,   //新增 模态框状态
                modal2    : false,   //修改 模态框状态
                modal3    : false,   //删除 模态框状态
                treeData  : null,    //tree数据
                type      : 1,       //模块类别
                checkNode : {}       //当前选中节点
            }
        },
        methods:{
            changeType(but){
                this.type = but.type;
                this.getData(this.type);
                this.checkNode = but;
                this.butName   = but.title;
                //console.log(but);
            },
            //增
            creatCate(){
                this.axios.post('http://10.31.162.52:3000/cates/data',{title:this.moduleName,type:this.type,parentId:this.checkNode._id}).then(v=>{
                    this.getData(this.type);
                })
            },
            //删
            removeCate(){
                //console.log(this.checkNode);
                this.delData(this.checkNode);
                this.axios.post('http://10.31.162.52:3000/cates/data/removes',{ids:this.ids}).then(v=>{console.log(v.data);
                    this.getData(this.type);})
                this.modal3 = false;
                this.ids    = '';
            },
            //改
            updataCate(){
                this.axios.put('http://10.31.162.52:3000/cates/data/'+this.checkNode._id,{title:this.butName}).then(v=>{
                    this.getData(this.type);
                })
            },
            //查
            getData(type){
                this.axios.post('http://10.31.162.52:3000/cates/list/'+type).then(r=>{
                    //console.log(r.data);
                    this.treeData = r.data[0].children})
            },
            //当前选中的节点
            onCheck(node){
                this.checkNode = node[0];
                this.butName   = this.checkNode.title;
                this.type      = this.checkNode.type;
                //console.log(this.butName);
            },
            //检验当前选中的节点
            checkM(modal){
                //如果选中按钮返回true
                if(JSON.stringify(this.checkNode)!=='{}'){
                    this[modal] = true;
                }else{
                    alert('请选择分类！');
                }
                //return (this.checkNode.type&&!this.checkNode._id)?true:false;
            },
            //当前节点的所有子节点
            delData(datas){
                for(var data in datas){
                 if(data=='_id'){
                     //console.log(datas[data],datas);
                     this.ids += datas[data] + ',';
                 }
                 if(data=='children'){
                     //this.delData(datas[data]);
                        for(var d in datas[data]){
                            this.delData(datas[data][d]);
                        }
                     }
                 }
                },


            //渲染按钮
            getMoudle(){
                this.axios.get('http://10.31.162.52:3000/cates/all').then(v=>{
                    this.buttons = v.data;
                    });
                this.getData(1);
            }
        },
        //监控模态框 每次关闭让data清空
        watch:{
            modal1(){
                if(this.modal1===false){
                 this.moduleName = '';
                }
            }
        },
        //dom挂载后获取第一个模块的信息
        mounted(){
            //渲染分类树
            this.getMoudle();
        }

    }
</script>

